<template>
	<div class="chart-scrollbar layout-padding">
		<div class="chart-warp layout-padding-auto layout-padding-view">
			<div class="chart-warp-top">
				<div class="big-data-up mb15">
					<div class="up-center">
						<span>我的数据</span>
					</div>
				</div>
			</div>
			<div class="chart-bottom">
				<div class="big-data-down-right">
					<!-- <div class="flex-warp-item">
						<div class="flex-warp-item-box">
							<div class="flex-title">
								<span>近7天产品追溯扫码统计</span>
								<span class="flex-title-small">单位：次</span>
							</div>
							<div class="flex-content">
								<div style="height: 100%" ref="chartsSevenDaysRef"></div>
							</div>
						</div>
					</div> -->
					<div class="flex-warp-item">
						<div class="flex-warp-item-box">
							<div class="flex-title">
								<span>体系账户增加图</span>
								<span class="flex-title-small">单位：人</span>
							</div>
							<div class="flex-content">
								<div style="height: 100%" ref="chartsInvestmentRef"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="chartIndex">
import { reactive, onMounted, watch, nextTick, onActivated, ref } from 'vue';
import * as echarts from 'echarts';
import 'echarts-wordcloud';

// 引入组件

// 定义变量内容

// const chartsSevenDaysRef = ref();
const chartsInvestmentRef = ref();
const state = reactive({
	myCharts: [],
});


// 初始化近7天产品追溯扫码统计
// const initChartsSevenDays = () => {
// 	const myChart = echarts.init(chartsSevenDaysRef.value);
// 	const option = {
// 		grid: {
// 			top: 15,
// 			right: 15,
// 			bottom: 20,
// 			left: 30,
// 		},
// 		tooltip: {
// 			trigger: 'axis',
// 		},
// 		xAxis: {
// 			type: 'category',
// 			boundaryGap: false,
// 			data: ['1天', '2天', '3天', '4天', '5天', '6天', '7天'],
// 		},
// 		yAxis: {
// 			type: 'value',
// 		},
// 		series: [
// 			{
// 				name: '邮件营销',
// 				type: 'line',
// 				stack: '总量',
// 				data: [12, 32, 11, 34, 90, 23, 21],
// 			},
// 			{
// 				name: '联盟广告',
// 				type: 'line',
// 				stack: '总量',
// 				data: [22, 82, 91, 24, 90, 30, 30],
// 			},
// 			{
// 				name: '视频广告',
// 				type: 'line',
// 				stack: '总量',
// 				data: [50, 32, 18, 14, 90, 30, 50],
// 			},
// 		],
// 	};
// 	myChart.setOption(option);
// 	state.myCharts.push(myChart);
// };

// 初始化近7天投入品记录
const initChartsInvestment = () => {
	const myChart = echarts.init(chartsInvestmentRef.value);
	const option = {
		grid: {
			top: 15,
			right: 15,
			bottom: 20,
			left: 30,
		},
		tooltip: {
			trigger: 'axis',
		},
		xAxis: {
			type: 'category',
			data: ['体系内店铺数 ', '本周已举行活动数 ', '本月已举行活动数', '本年已举行活动数', '累积已举行活动数'],
		},
		yAxis: {
			type: 'value',
			nameGap: 15, 
		},
		series: [
			{
				data: [300, 220, 400, 500, 1000],
				type: 'bar',
			},
		],
	};
	myChart.setOption(option);
	state.myCharts.push(myChart);
};
// 批量设置 echarts resize
const initEchartsResizeFun = () => {
	nextTick(() => {
		for (let i = 0; i < state.myCharts.length; i++) {
			state.myCharts[i].resize();
		}
	});
};
// 批量设置 echarts resize
const initEchartsResize = () => {
	window.addEventListener('resize', initEchartsResizeFun);
};
// 页面加载时
onMounted(() => {
	// initChartsSevenDays();
	initChartsInvestment();
	initEchartsResize();
});
// 由于页面缓存原因，keep-alive
onActivated(() => {
	initEchartsResizeFun();
});
// 监听 pinia 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
watch(
	() => {
		initEchartsResizeFun();
	}
);
</script>

<style scoped lang="scss">
.chart-bottom{
	width:90%;
	display: block;
	margin:0 auto;
	height: 600px;
}
.big-data-up {
	height: 55px;
	width: 100%;
	display: flex;
	align-items: center;
	padding: 0 15px;
	color: var(--el-color-primary);
	overflow: hidden;
	position: relative;

	.up-left {
		position: absolute;
	}

	.up-center {
		width: 100%;
		display: flex;
		justify-content: center;
		font-size: 18px;
		letter-spacing: 5px;
		background-image: -webkit-linear-gradient(left,
				var(--el-color-primary),
				var(--el-color-primary-light-3) 25%,
				var(--el-color-primary) 50%,
				var(--el-color-primary-light-3) 75%,
				var(--el-color-primary));
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text;
		background-clip: text;
		background-size: 200% 100%;
		-webkit-animation: masked-animation-data-v-b02d8052 4s linear infinite;
		animation: masked-animation-data-v-b02d8052 4s linear infinite;
		-webkit-box-reflect: below -2px -webkit-gradient(linear, left top, left bottom, from(transparent), to(hsla(0, 0%, 100%, 0.1)));
		position: relative;

		@keyframes masked-animation {
			0% {
				background-position: 0 0;
			}

			100% {
				background-position: -100% 0;
			}
		}

		position: relative;

		&::after {
			content: '';
			width: 250px;
			position: absolute;
			bottom: -15px;
			left: 50%;
			transform: translateX(-50%);
			border: 1px transparent solid;
			border-image: linear-gradient(to right, var(--el-color-primary-light-9), var(--el-color-primary)) 1 10;
		}

		span {
			cursor: pointer;
		}
	}
}
</style>
